<template>
	<view class="fun-flex-col page">
		<view class="fun-flex-col group">
			<view class="fun-flex-col group_4">
				<view class="fun-flex-col section">
					<view class="fun-flex-row fun-justify-center fun-items-center fun-self-stretch group_6">
						<text class="font_2 text_3">$</text>
						<text class="font_2 text_4 ml-7">24,158.99</text>
					</view>
					<view class="fun-flex-col fun-justify-start fun-items-center fun-self-center text-wrapper">
						<text class="font_3 text_5">Total static</text>
					</view>
					<view class="fun-flex-row equal-division">
						<view class="fun-flex-col fun-items-center group_7">
							<text class="font">200000.00</text>
							<text class="fun-mt-6 font_4 text_6">My Principal</text>
						</view>
						<view class="fun-flex-col fun-items-center group_7">
							<text class="font">+3142.89</text>
							<text class="fun-mt-6 font_4 text_7">Yesterday's Return</text>
						</view>
						<view class="fun-flex-col fun-items-center group_7">
							<text class="font">100000.00</text>
							<text class="fun-mt-6 font_4 text_8">Cumulative Return</text>
						</view>
					</view>
				</view>
				<text class="fun-mt-12 font_3 text_9 text_10">
					Note: The above list of “Cumulative Returns “only counts the cumulative returns of the products you are holding, details of the returns of closed products can be found in the details below. Your “Total static” include products that are in redemption.
				</text>
				<view class="fun-mt-12 fun-flex-row fun-justify-between fun-items-center section_2" @click="hold">
					<text class="font_5 text_11">Products in Redemption</text>
					<view class="fun-flex-row fun-items-center">
						<text class="font_6">67,572.33</text>
						<image class="fun-ml-6 fun-shrink-0 image_5"
							src="../../static/175d666a48242595b9c10a5178cc5ed6.png" />
					</view>
				</view>
				<view class="fun-mt-12 fun-flex-row fun-justify-between fun-items-center section_2" @click="finish">
					<text class="font_5 text_12">Products Finished</text>
					<image class="image_5" src="../../static/175d666a48242595b9c10a5178cc5ed6.png" />
				</view>
				<view class="fun-mt-12 fun-flex-col section_3">
					<view class="fun-flex-row fun-justify-between fun-items-center group_8">
						<text class="font_5 text_13">My Holding Products</text>
						<view class="fun-flex-row fun-items-center">
							<text class="font_6">67,572.33</text>
							<image class="fun-ml-6 fun-shrink-0 image_5"
								src="../../static/5c628016798ccecdae1acb1d103c53ae.png" />
						</view>
					</view>
					<view class="fun-mt-18 fun-flex-col">
						<view class="fun-flex-col list-item" v-for="(item, index) in items" :key="index">
							<view class="fun-flex-row fun-justify-between fun-items-center fun-self-stretch group_9">
								<text class="font_7 text_14">QuantitativeBondStrategyFundI</text>
								<text class="font_3 text_15">OrderNo.123456</text>
							</view>
							
							<text class="fun-self-start font_5 text_16">38482.11</text>
							<view class="fun-flex-row fun-justify-between group_10 equal-division_2">
								<view class="fun-flex-col fun-items-start equal-division-item">
									<text class="font_3">Yield:</text>
									<text class="font_8 mt-6">18%</text>
								</view>
								<view class="fun-flex-col fun-items-start group_11 equal-division-item">
									<text class="font_3">Return:</text>
									<text class="font_8 mt-6">+6924.2</text>
								</view>
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		components: {},
		props: {},
		data() {
			return {
				items: [null, null, null, null],
			};
		},

		methods: {
			finish(){
				uni.navigateTo({url:'/pages/myPositions/finish'})
			},
			hold(){
				uni.navigateTo({url:'/pages/myPositions/holding'})
			}
		},
	};
</script>

<style scoped lang="scss">
	.ml-5 {
		margin-left: 10rpx;
	}

	.ml-7 {
		margin-left: 14rpx;
	}

	.mt-13 {
		margin-top: 26rpx;
	}

	.mt-29 {
		margin-top: 58rpx;
	}

	.mt-9 {
		margin-top: 18rpx;
	}

	.page {
		background-color: #00033b;
		width: 100%;
		overflow-y: auto;
		overflow-x: hidden;
		height: 100%;
		padding: 56rpx 32rpx 90rpx;
		.group {
			.group_2 {
				padding-left: 36rpx;

				.text {
					color: #ffffff;
					font-size: 30rpx;
					font-family: SF Pro Text;
					font-weight: 600;
					line-height: 22.18rpx;
				}

				.image {
					width: 34rpx;
					height: 22rpx;
				}

				.image_2 {
					width: 30rpx;
					height: 22rpx;
				}

				.image_3 {
					width: 48rpx;
					height: 22.66rpx;
				}
			}

			.group_3 {
				.pos {
					position: absolute;
					left: 0;
					top: 50%;
					transform: translateY(-50%);
				}

				.text_2 {
					font-weight: 300;
					line-height: 23.26rpx;
				}
			}

			.view {
				margin-top: 52rpx;
			}

			.group_4 {
				.section {
					padding: 30rpx;
					background-image: url('../../static/9caf62ec192d5d306d052d685a486159.png');
					background-size: 100% 100%;
					background-repeat: no-repeat;

					.group_6 {
						padding: 12rpx 0 28rpx 0;
						.font_2 {
							font-size: 66.66rpx;
							font-family: SF Pro Display;
							font-weight: 700;
							color: #ffffff;
						}

						.text_3 {
							line-height: 56.32rpx;
						}

						.text_4 {
							line-height: 58.3rpx;
						}
					}

					.text-wrapper {
						padding: 8rpx 0;
						background-color: #ffffff33;
						border-radius: 24rpx;
						width: 172rpx;
						border: solid 2rpx #ffffff1a;

						.text_5 {
							font-size: 22rpx;
						}
					}

					.equal-division {
						align-self: stretch;
						margin-top: 48rpx;
						.group_7 {
							flex: 1 1 228.66rpx;

							.font_4 {
								font-size: 20rpx;
								font-family: SF Pro Display;
								font-weight: 300;
								color: #ffffff;
							}

							.text_6 {
								font-size: 22rpx;
							}

							.text_7 {
								font-size: 22rpx;
							}

							.text_8 {
								font-size: 22rpx;
							}
						}
					}
				}

				.section_2 {
					padding: 24rpx 32rpx;
					background-color: #1b1d53;
					border-radius: 16rpx;

					.text_11 {
						line-height: 25.52rpx;
					}

					.text_12 {
						line-height: 21.06rpx;
					}
				}

				.section_3 {
					padding: 24rpx;
					background-color: #1b1d53;
					border-radius: 16rpx;
					.group_8 {
						padding: 0 32rpx;

						.text_13 {
							line-height: 26.26rpx;
						}
					}

					.list-item {
						padding: 20rpx 0;
						.group_9 {
							.font_7 {
								font-size: 24rpx;
								font-family: SF Pro Display;
								font-weight: 300;
								color: #ffffff;
							}
						}

						.text_16 {
							margin-top: 24rpx;
						}

						.group_10 {
							align-self: flex-start;
							margin-top: 28rpx;

							.equal-division-item {
								
							}

							.group_11 {
								margin-right: 88rpx;
							}

							.font_8 {
								font-size: 28rpx;
								font-family: SF Pro Display;
								font-weight: 700;
								color: #5ceec4;
							}
						}

						.equal-division_2 {
							width: 485.84rpx;
						}
					}
					.list-item:not(:last-child){
						border-bottom: 1px solid #999;
					}
					
				}

				.font_5 {
					font-size: 28rpx;
					font-family: SF Pro Display;
					font-weight: 700;
					color: #ffffff;
				}

				.font_6 {
					font-size: 32rpx;
					font-family: SF Pro Display;
					font-weight: 700;
					color: #ffffff;
				}

				.image_5 {
					width: 40rpx;
					height: 40rpx;
				}

				.group_5 {
					margin-left: 14rpx;
					filter: blur(3.5rpx);
					width: 214rpx;
					height: 8rpx;
				}
			}

			.font {
				font-size: 32rpx;
				font-family: SF Pro Display;
				font-weight: 700;
				color: #ffffff;
			}
		}

		.section_4 {
			background-color: #1b1d53;
			height: 85.3rpx;
			border-top: solid 2rpx #00000012;

			.group_14 {
				flex: 1 1 187.5rpx;

				.text_20 {
					color: #8d8ea9;
					font-size: 18rpx;
					line-height: 12.86rpx;
					font-weight: unset;
				}

				.text_21 {
					font-size: 18rpx;
					line-height: 13.08rpx;
				}

				.text_22 {
					font-size: 18rpx;
					line-height: 15.98rpx;
				}

				.text_23 {
					font-size: 18rpx;
					line-height: 15.98rpx;
				}
			}

			.equal-division-item_2 {
				padding: 4rpx 0 16rpx;
			}
		}

		.image_4 {
			width: 48rpx;
			height: 48rpx;
		}

		.font_3 {
			font-size: 20rpx;
			font-family: SF Pro Display;
			font-weight: 300;
			color: #ffffff;
		}

		.text_9 {
			opacity: 0.5;
		}
	}
</style>